<template>
   <div class="produce-in-detail-wrap">
     <el-card>
      <div slot="header" class="card-title">
        <span>调整记录</span>
        <div class="close" @click="close">关闭</div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :border="true"
        :fit="true"
        :stripe="true"
        size="mini"
        align="center">

        <el-table-column
          prop="format_name"
          label="配料规格"
          min-width="140"
          align="center">
        </el-table-column>

        <el-table-column
          prop="price"
          label="供应价格"
          min-width="130"
          align="center">
        </el-table-column>

        <el-table-column
          prop="created_at"
          label="操作日期"
          min-width="170"
          align="center">
        </el-table-column>

        <el-table-column
          prop="name"
          label="操作账号"
          min-width="120"
          align="center">
        </el-table-column>

      </el-table>

        <el-pagination class="page-count"
        @current-change="pageChange" 
        background layout="total, prev, pager, next" 
        :total="totalCount" 
        :current-page.sync='page' 
        :page-size="10"></el-pagination>

      <!-- <deleteConfirm v-if="showMask" @closeDelete="closeDelete" @deleteConfirm="deleteConfirm"></deleteConfirm> -->
  </el-card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Emit } from 'vue-property-decorator';
import ajaxResquest from '@/api/apiRequest';
import AjaxResquest from '@/api/apiRequest';

@Component({})
export default class PriceChangeTable extends Vue {
  @Prop()
  logData: any;
  tableData: any[] = [];

  priceRes!: ajaxResquest;
  id!: number;
  showMask: boolean = false;

  totalCount: number = 0;
  page: number = 1;
  pageSize: number = 20;
  mounted() {
    console.log(this.logData);
    this.id = this.logData.id;
    this.priceRes = new ajaxResquest('/purchase/getSuppliersPriceLog');
    this.getData();
  }
  getData() {
    let data = {
      id: this.id
    };
    this.priceRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        this.tableData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
  pageChange() {
    this.getData();
  }
  @Emit()
  close() {}
}
</script>
<style lang="less">
.produce-in-detail-wrap {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500;
  z-index: 999;
  .search {
    text-align: left;
    margin-bottom: 20px;
    .search-input {
      width: 300px;
      margin: 0 20px 0 20px;
    }
  }
  .page-count {
    margin-top: 10px;
    text-align: right;
  }
  .btn {
    margin-top: 15px;
    text-align: left;
  }
  .card-title {
    position: relative;
  }
}
</style>
